<template>
	<div class="container" :style="styles.bg__styles">
		<div class="nav">
			<div class="logo">
				<img src="../../assets/img/logo.png" alt="">
				<p style="letter-spacing: 0.5px">影像管理系统</p>
			</div>
		</div>
		<div class="login__box" :style="styles.card__styles" >
				<Box class="box" caption="密码找回">
					<el-form :model="passInfo" :rules="checkRules"  ref="passInfo" label-width="100px" class="demo-ruleForm" size="normal">
						<el-form-item label="用户名称" prop="name">
							<el-input v-model="passInfo.userName" placeholder="请输入用户名称"></el-input>
						</el-form-item>
						<el-form-item label="邮箱" prop="email">
							<el-input v-model="passInfo.email" placeholder="请输入邮箱"></el-input>
						</el-form-item>
						<el-form-item label="新密码" prop="password" >
							<el-input v-model="passInfo.password" placeholder="请输入密码"></el-input>
						</el-form-item>
						<el-form-item label="重复密码" prop="checkPass" >
							<el-input v-model="passInfo.checkPass" placeholder="请确认密码"></el-input>
						</el-form-item>
						<el-form-item>
							<el-button type="primary" @click="" round>确定</el-button>
							<el-button @click="$router.back()" round>返回</el-button>
						</el-form-item>
					</el-form>
				</Box>
		</div>
		<div class="footer">
			<p> 最佳浏览体验：chrome v23.0.1271.64 以上版本 或 firefox v22.0 以上版本 </p>
			<p style="font-weight: bold">Copyright © 2020-2021 大家保险信息科技中心出品 All rights reserved.</p>
		</div>
	</div>
</template>

<script>
import bgImg from '../../assets/img/login_bg.png'
import loginCard from '../../assets/img/login_card.png'
import Box from "../../components/pc/Box";
export default {
	name: "forwardPassword",
	components:{
		Box
	},
	data(){
		return{
			styles:{
				bg__styles:{
					backgroundImage:`url(${bgImg})`
				},
				card__styles:{
					backgroundImage: `url(${loginCard})`
				}
			},
			passInfo:{
					userName:'',
					email:'',
					password:'',
					checkPass:''
			},
			checkRules:{
				userName:[
					{ required: true, message: '请输入姓名', trigger: 'blur' },
					{ min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
				],
				email:[
					{ required: true, message: '请输入邮箱', trigger: 'blur' }
				],
				password: [
					{ required: true, message: '请输入密码', trigger: 'blur' }
				],
				checkPass: [
					{ required: true, message: '请确认密码', trigger: 'blur' }
				]
			}
		}
	},
	methods:{
	}
}
</script>

<style scoped lang="scss">
.container{
	width: 100%;
	height: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	background-size: cover;
	background-repeat: no-repeat;
	position: relative;
	.footer{
		position: absolute;
		bottom: 1%;
		p{
			color: #666666;
			font-size: 15px;
		}
	}
	.login__box{
		min-width: 800px;
		width: 60%;
		height: 450px;
		background-position: center;
		background-repeat: no-repeat;
		background-size: contain; // 把图像扩展至最大尺寸，以使宽度和高度 完全适应内容区域。
		padding: 20px 75px;
		position: relative;
	}
	.nav{
		height: 45px;
		width: 100%;
		background-color: #ffffff;
		position: absolute;
		display: flex;
		align-items: center;
		top: 0;
		box-shadow: 0 0 10px 0 #e3e3e3;
	}
	.logo{
		padding-left: 10px;
		display: flex;
		align-items: center;
		img{
			width: 44px;
			height: 44px;
		}
		p{
			font-weight: bold;
		}
	}
	.box{
		width: 55%;
		margin: 0 auto;
		//margin-top: -20px;
		/deep/.box__content{
			width: 100%;
			box-shadow: none;
			margin: 0 auto;
		}
		.el-form{
			width: 70%;
			margin: 40px auto;
			.el-button{
				letter-spacing: 5px;
				margin: 0 10px;
			}
		}
	}
}
</style>
